<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>嘿_bug</title>

        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- import Vue before Element -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <style>
          body{
              margin: 0;
              padding: 0;
              overflow:hidden;
              background: #d8d5d5;
              /* background:url('http://blog.agebbs.cn/blog/image/bg.jpg') 0 0 no-repeat ; */
              /* background-size: 100% 100%; */
          }

          li {
              text-decoration: none;
              list-style-type:none;
          }
          .infinite-list {
              padding: 0px;
              margin-block-start: 0px;
              margin-bottom: 0px;
          }
          .index-h {
              width: 60%;
              margin: 0 auto;
          }
          .index-h .logo{
              height: 60px;
              line-height: 60px;
              /* border-bottom: solid 1px #e6e6e6; */
              color:#1989fa;
          }

          .header{
              height: 60px;
              margin:0;
              padding: 0;

          }

          .header .el-menu.el-menu--horizontal{
              border: 0;
          }

          .header .el-card__body{
              padding:0px;
          }

          .index-h .aside .el-card__body{
              padding:0px;

          }

          /* .index-h .aside{
              border: 1px solid #e6e6e6;
          } */

          .index-h .aside .el-menu{
              border:0;
          }

          .content{
              left: 20%;
              position: absolute;
              top:80px;
              bottom: 0px;
              /* margin: 10px; */
          }

          /*滚动条的宽度*/

            ::-webkit-scrollbar {
                width:0px;
                height:4px;
            }

        /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

            ::-webkit-scrollbar-track {
                width: 1px;
                background-color:#fff;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius:2em;
            }

        /*滚动条的设置*/

            ::-webkit-scrollbar-thumb {
                background-color:#fff;
                background-clip:padding-box;
                min-height:28px;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius:2em;
            }
        /*滚动条移上去的背景*/

            ::-webkit-scrollbar-thumb:hover {
                background-color:#fff;
            }

            .content-l {
                border-radius:5px;
                margin: 0px 10px 10px;
                padding:0px;
                /* background:#FFF; */
            }

            .content-l .el-card {
                background-color: #FFF;
                color: #303133;
                -webkit-transition: .3s;
                transition: .3s;
                border: 0px;
                /* border-radius: 0; */
            }
        </style>
    </head>

    <body class="myblog">
        <div id="app">
            <template>
                <el-container v-loading.fullscreen.lock="fullscreenLoading">
                    <el-header class="header">
                        <el-card style="padding 0;background:#fff;">
                            <el-row class="index-h">
                                <el-col :span="12">
                                    <div class="logo" @click="openFullScreen1()">嘿_bug</div>
                                </el-col>
                                <el-col :span="12">
                                    <el-menu style="float: right" :default-active="activeIndex" class="el-menu-demo" text-color="#409eff" active-text-color="#1989fa" mode="horizontal" @select="handleSelect">
                                        <el-menu-item index="1" >首页</el-menu-item>
                                        <el-submenu index="2">
                                            <template slot="title">分类</template>
                                            <el-menu-item index="2-1">选项1</el-menu-item>
                                            <el-menu-item index="2-2">选项2</el-menu-item>
                                            <el-menu-item index="2-3">选项3</el-menu-item>
                                            <el-submenu index="2-4">
                                                <template slot="title">选项4</template>
                                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                                            </el-submenu>
                                        </el-submenu>
                                        <el-menu-item index="3">归档</el-menu-item>
                                        <el-menu-item index="4">关于</el-menu-item>
                                    </el-menu>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-header>

                    <el-container class="index-h content">
                        <el-main class="content-l">
                            <div class="margin-bottom：100px">
                                <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                                    <li v-for="i in count" class="infinite-list-item" style="margin-bottom:10px;">
                                        <el-card shadow="always" style="height:200px">
                                            @{{ i }}
                                        </el-card>
                                    </li>
                                </ul>
                            </div>
                            <div style="height:38px;text-align: center;background:#fff; link-height:48px; padding-top:10px">
                                <div class="block">
                                    <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="1000">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-main>

                        <el-aside class="aside" width="20%" style="margin:0px 0 10px 10px;padding:0; background:#fff;border-radius:5px">
                            {{-- <el-card> --}}
                                <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                text-color="#409eff"
                                active-text-color="#1989fa"
                                >
                                <el-submenu index="1">
                                    <template slot="title">
                                    {{-- <i class="el-icon-location"></i> --}}
                                    <span>导航一</span>
                                    </template>
                                    <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group title="分组2">
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                    </el-menu-item-group>
                                    <el-submenu index="1-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                                <el-menu-item index="2">
                                    {{-- <i class="el-icon-menu"></i> --}}
                                    <span slot="title">导航二</span>
                                </el-menu-item>
                                <el-menu-item index="3" disabled>
                                    {{-- <i class="el-icon-document"></i> --}}
                                    <span slot="title">导航三</span>
                                </el-menu-item>
                                <el-menu-item index="4">
                                    {{-- <i class="el-icon-setting"></i> --}}
                                    <span slot="title">导航四</span>
                                </el-menu-item>
                                </el-menu>
                            {{-- </el-card> --}}
                        </el-aside>
                        {{-- <el-footer>

                        </el-footer> --}}
                    </el-container>

                </el-container>

            </template>
        </div>


    </body>


    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    visible: false,
                    fullscreenLoading: false,
                    count: 4
                }
            },
            methods: {
                load () {
                    // this.count += 1
                },
                openFullScreen1() {
                    alert(1);
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                    this.fullscreenLoading = false;
                    }, 2000);
                },
            }
        })
    </script>
</html>
